<!--
 * @Description: 
 * @Date: 2022-04-07 11:34:34
 * @LastEditTime: 2025-02-14 20:50:13
 * @FilePath: /demo_important/src/views/Checkbox/index.vue
-->
<template>
  <div class="checkbox">
    <form action="">
      <label><input name="Fruit" type="checkbox" value="" />1 </label>
      <label><input name="Fruit" type="checkbox" value="" />2 </label>
      <label
        ><input name="Fruit" type="checkbox" value="" :checked="true" />3
      </label>
      <!-- <label
        ><input name="checkbox" type="checkbox" value="" :checked="checked" />4
      </label> -->
    </form>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用地类型" prop="useLandMold">
        <el-cascader
          ref="cascader"
          collapse-tags
          clearable
          :props="props_c"
          :append-to-body="false"
          v-model="form.useLandMold"
          :options="treeData"
          @change="chioceLandMold"
        ></el-cascader>
      </el-form-item>
    </el-form>

    <div class="hhh">
      <vue-seamless-scroll
        :data="listData"
        :class-option="defaultOption"
        class="field-table-content"
      >
        <div class="list">
          <div
            v-for="(item2, index2) in listData"
            :key="index2"
            class="listson"
            style="padding: 10px; margin: 5px"
          >
            12
          </div>
        </div>
      </vue-seamless-scroll>
      <!-- <vue-seamless-scroll
        style="width:100%;height:100%"
        class="scroll-area"
        :class-option="defaultOption"
      >
        <div
          class="sonsss"
          v-for="item in items"
          :key="item.id"
        >{{ item.text }}</div>
      </vue-seamless-scroll> -->
      <listScroll class="boxss">
        <div class="listss">
          <div class="sss">
            顿发哈尽快发货的话啊时刻阿斯发哈尽快发货的话啊时刻阿斯发哈的话啊时刻asjkfbadskjhfkajdhskfhdsjfhkdsjhfjkadsjhfjkds是短发似懂非懂
          </div>
        </div>
      </listScroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
import listScroll from '@/components/listScroll.vue';
import { sayHello } from 'wk_1210';
export default {
  name: '',
  components: {
    vueSeamlessScroll,
    listScroll,
  },
  props: {},
  data() {
    return {
      id: [1],
      dataList: [1],
      checked: true,
      treeData: [
        {
          label: '一级 1',
          id: 1,
          children: [
            {
              label: '二级 1-1',
              id: 2,
              children: [
                {
                  id: 3,
                  label: '三级 1-1-1',
                },
              ],
            },
          ],
        },
        {
          label: '一级 2',
          id: 4,
          children: [
            {
              label: '二级 2-1',
              id: 5,
              children: [
                {
                  id: 6,
                  label: '三级 2-1-1',
                },
              ],
            },
            {
              label: '二级 2-2',
              id: 7,
              children: [
                {
                  id: 8,
                  label: '三级 2-2-1',
                },
              ],
            },
          ],
        },
        {
          id: 9,
          label: '一级 3',
          children: [
            {
              id: 10,
              label: '二级 3-1',
              children: [
                {
                  id: 11,
                  label: '三级 3-1-1',
                },
              ],
            },
            {
              id: 12,
              label: '二级 3-2',
              children: [
                {
                  id: 13,
                  label: '三级 3-2-1',
                },
              ],
            },
          ],
        },
      ],
      items: [
        { id: 1, text: '内容1' },
        { id: 2, text: '内容2' },
        { id: 3, text: '内容3' },
      ],
      listData: [
        {
          epicycle: '上城区',
          addup: '2021-08-09',
          county: '上城区',
        },
        {
          epicycle: '萧山',
          addup: '2021-08-09',
          county: '上城区',
        },
        {
          epicycle: '王五',
          addup: '2021-08-09',
          county: '上城区',
        },
        {
          epicycle: '赵六',
          addup: '2021-08-09',
          county: '上城区',
        },
        {
          epicycle: '前七',
          addup: '2021-08-09',
          county: '上城区',
        },
        {
          epicycle: '孙八',
          addup: '2021-08-09',
          county: '上城区',
        },
      ],
      form: {
        useLandMold: '',
      },
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 0.3,
        // direction: 1,
        // step: 0.2, // 数值越大速度滚动越快

        // limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length

        // hoverStop: true, // 是否开启鼠标悬停stop

        direction: 3, // 0向下 1向上 2向左 3向右

        // openWatch: true, // 开启数据实时监控刷新dom

        // singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1

        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3

        // waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    },
  },

  watch: {},
  created() {},
  mounted() {
    console.log(sayHello());
  },
  methods: {
    chioceLandMold() {},
  },
};
</script>

<style scoped>
.sss {
  height: 20px;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  /* 限制显示行数为1行 */
  -webkit-box-orient: vertical;
}
.boxss {
  display: flex;
  height: 85%;
  width: 300px;
}
.listss {
  display: flex;
  align-items: center;
  height: 100%;
}
.addscroll {
  display: flex;
  flex-direction: column;
}
/* .field-table-content {
  width: 100%;
  height: 100px;
} */
.listson {
  /* width: 200px; */
  width: 200px;
  height: 100%;
  background: red;
}
.sonsss {
  height: 50px;
}
.scroll-area {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.field-table-content {
  width: 900px;
  height: 293px;
  overflow: hidden;
}
.list {
  width: 100%;
  height: 400px;
  display: flex;
}
</style>
